<!-- 顶部导航组件 -->
<script setup lang="ts">
import axios from 'axios';
import { onMounted, ref } from 'vue';

type ChannelItem = {
  id: number;
  name: string;
};

// 频道接口响应数据
type ChannelResData = {
  data: {
    channels: ChannelItem[];
  };
  message: string;
};

// 渲染数据数组
const list = ref<ChannelItem[]>([])

// 使用 defineProps 接收父组件传递过来的 ID
const props = defineProps<{
  changeID:number
}>()
// console.log(props.changeID);

// 通过 defineEmits获取 emit 函数
defineEmits<{
  (e: 'changeChanID', id: number): void
}>()


// 生命周期
onMounted(async ()=>{
// Axios 获取数据 渲染列表
const res =  await axios.get<ChannelResData[]>('http://geek.itheima.net/v1_0/channels')
// console.log(res.data.data.channels);
list.value= res.data.data.channels

})

</script>

<template>
  <div class="channel-nav">
    <nav class="list">
      <a
        class="item"
        :class="{ active: item.id === props.changeID }"
        href="javascript:;"
        v-for="(item) in list"
        :key="item.id"
        
        @click="$emit('changeChanID',item.id)"
      >
        {{ item.name }}
      </a>
    </nav>
  </div>
</template>
